<template>
  <div class="wrap">
    <el-row>
      <!--工具条-->
      <el-col :span="24" class="header-wrap">
        <el-form :inline="true" :model="formInline" :rules="rules" ref="formInline">
          <el-form-item label="任务名" prop="jobName">
            <el-input v-model="formInline.jobName" prefix-icon="el-icon-search"></el-input>
          </el-form-item>
          <el-form-item label="执行状态" prop="status">
            <el-select v-model="formInline.status" placeholder="请选择执行状态" @change="getSearchStatus">
              <el-option label="全部" value=""></el-option>
              <el-option label="执行成功" value="1"></el-option>
              <el-option label="执行失败" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query('formInline')">查询</el-button>
            <el-button type="danger" @click="reset('formInline')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!--表格-->

      <el-col :span="24">
        <el-table :data="executionRecords" :border="true" style="width: 100%;">
          <el-table-column label="任务名" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.jobName }}</span>
            </template>
          </el-table-column>

          <el-table-column label="执行状态" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.desc }}</span>
            </template>
          </el-table-column>

          <el-table-column label="执行时间" align="center" :formatter="dateFormat" prop="executeTime">

          </el-table-column>

          <el-table-column label="用时（毫秒）" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.useTime }}</span>
            </template>
          </el-table-column>

        </el-table>
        <el-pagination
          class="top"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 15, 25, 30]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total='total'>
        </el-pagination>
      </el-col>

    </el-row>

  </div>

</template>

<script type="text/ecmascript-6">
  import {post} from '@/utils/http'
  export default {
    data() {
      let validatejobName = (rule, value, callback) => {
        if (value === '') {
          callback();
        } else {
          callback();
        }
      };
      return {
        // 个人信息存值
        dialogFormVisible: false,
        executionRecords: [{
          jobName:'',
          desc:'',
          executeTime:'',
          useTime:''
        }],
        currentPage: 1,
        total: 0,
        size: 10,
        formInline: {
          jobName: '',
          status: ''
        },
        idd: '',
        rules: {
          jobName: [
            { validator: validatejobName, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      getSearchStatus(value) {
        this.query();
      },
      handleSizeChange(val) {
        this.size = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getList();
      },
      // 格式化时间
      dateFormat(row,column) {
        let tableTime = row[column.property];
        if (tableTime == undefined) {
          return "";
        }
        return this.moment(tableTime).format("YYYY-MM-DD HH:mm:ss");
      },
      getList() {
        let para = {pageIndex: this.currentPage,pageSize: this.size,}
        post('/api/quartz/v1/job/findHistory',para).then((response) => {
          this.executionRecords = response.data.data;
          this.total = response.data.totalCount;
          this.size = response.data.pageSize;
        })
      },
      reset(formInline) {
        this.$refs[formInline].resetFields();
        this.getList();
      },
      query(formInline) {
        let para = {
          pageSize: this.size,
          pageIndex: this.currentPage
        };
        if(!this.formInline.jobName.replace(/\s/g, "") == '') {
          para.jobName = this.formInline.jobName.replace(/\s/g, "")
        }
        if(!this.formInline.status == '') {
          para.status = this.formInline.status
        }
        post('/api/quartz/v1/job/findHistory',para).then((response) => {
          this.executionRecords = response.data.data;
          this.total = response.data.totalCount;
          console.log( response.data)
          this.size = response.data.pageSize;
        })
        // this.$refs[formInline].validate((vaild) => {
        //   if(vaild) {
        // 发送请求查询


        // }
        // })
      },
    },
    mounted(){
      this.getList();
    },
  }
</script>

<style lang='scss' scoped>
  .wrap {
    /*padding: 20px;*/
    .header-wrap{
      margin-bottom: 60px;
      background-color: #66BFBF;
      border-radius: 6px;
    }
    .el-form-item {
      margin-top: 22px;
      margin-left: 22px;
    }
    .pad .el-col {
      margin-top: 5px;
      margin-bottom: 5px;
    }
    .top {
      margin-top: 20px;
      float: right;
    }
  }
</style>
